<template>
	<view class="chart-container">
		<!-- 自定义标题区域 -->
		<view class="chart-title">
			<text class="title-text">客群产品偏好top10</text>
		</view>
		<qiun-data-charts type="bar" :chartData="chartData" :xAxis="xAxisConfig" :yAxis="yAxisConfig"
			:legend="legendConfig" :bar="barConfig" width="750rpx" height="400rpx" :opts="opts" />
	</view>
</template>

<script>
	import {
		selectOpenDoorProductPreference
	} from '@/common/api/statistics.js'
	import {
		convertObjToArray
	} from '@/utils/util.js'
	export default {
		data() {
			return {
				// 图表数据
				chartData: {
					// Y轴类别（横向柱状图的类别在Y轴）

					// 每个类别的数值（横向长度）

				},
				// X轴配置（数值轴）
				xAxisConfig: {
					type: "value",
					min: 0,
					interval: 10, // 刻度间隔10
					label: {
						fontSize: 22
					}
				},
				// Y轴配置（类别轴）
				yAxisConfig: {
					type: "category",
					label: {
						fontSize: 22, // 类别文字大小
						overflow: "breakAll" // 自动换行
					}
				},
				// 图例配置（隐藏，因类别已包含完整说明）
				legendConfig: {
					show: false
				},
				// 柱状图配置
				barConfig: {
					width: 20, // 柱子宽度
					borderRadius: [0, 6, 6, 0] // 右侧圆角（横向柱子右侧圆角更美观）
				},
				opts: {
					legend: {
						itemGap: 10,
						lineHeight: 15
					},
					extra: {
						bar: {
							seriesGap: 10,
						}
					}
				}
			};
		},
		created() {
			this.getData()
		},
		methods: {
			async getData() {
				try {
					let res = await selectOpenDoorProductPreference({
						customerLabel: this.customerLabel
					})
					this.getServerData(res.data);
				} catch (error) {
					//TODO handle the exception
				}
			},
			getServerData(data) {
				let result = Object.entries(data)
					.map(([key, value]) => ({
						name: key,
						data: [value]
					}));
				let res = {
					categories: [""],
					series: result
				};
				this.chartData = JSON.parse(JSON.stringify(res));

			},
		}
	};
</script>

<style scoped>
	.chart-container {
		padding: 24rpx;
		box-sizing: border-box;
		background-color: #fff;
		/* margin: 20rpx; */
		/* border-radius: 8rpx; */
		margin-bottom: 24rpx;
	}

	.chart-wrapper {
		padding: 30rpx;
		background-color: #fff;
		/* border-radius: 16rpx; */
	}

	/* 自定义标题样式 */
	.chart-title {
		display: flex;
		justify-content: space-between;
		/* 标题左对齐，省略号右对齐 */
		align-items: center;
		padding: 0 20rpx 20rpx;
		/* 底部留出距离 */
		/* border-bottom: 1px solid #f5f5f5; */
		/* 底部分隔线 */
		/* margin-bottom: 20rpx; */
	}

	.title-text {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		/* 标题深色 */
	}

	.more-icon {
		font-size: 36rpx;
		color: #999;
		/* 省略号浅色 */
		padding: 10rpx;
	}
</style>